<html>
  <head>
    <title>Card Info</title>
	<link href="http://127.0.0.1:8888/kendoui/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://127.0.0.1:8888/kendoui/styles/kendo.default.min.css" rel="stylesheet" />
	<script src = "http://127.0.0.1:8888/kendoui/js/jquery.min.js" ></script>
	<script src="http://127.0.0.1:8888/kendoui/js/kendo.web.min.js"></script>
  </head>
  <body>
    <div id="example" class="k-content">
            <div id="clientsDb">

                <div id="grid" style="height: 380px"></div>

            </div>

            <style scoped>
                #clientsDb {
                    width: 692px;
                    height: 413px;
                    margin: 30px auto;
                    padding: 51px 4px 0 4px;
                }
            </style>
            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "http://localhost:8888/cards/all"
                            },
                            pageSize: 10,
							schema: {
                                model: {
                                    fields: {
                                        "name": { type: "string" },
                                        "number": { type: "string" },
                                        "type": { type: "string" },
                                        "star": { type: "number" },
                                        "property": { type: "string" },
										"race": { type: "string" },
										"attack": { type: "number" },
										"defence": { type: "number" },
										"rare": { type: "string" },
										"package": { type: "string" },
										"description": { type: "string" }
                                    }
                                }
                            }
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                            field: "name",
                            title: "Name"
                        }, {
                            field: "number",
                            title: "卡片密码",
                        }, {
                            field: "type",
                            title: "卡片种类"
                        }, {
                            field: "star",
							title: "星级"
                        }, {
                            field: "property",
							title: "属性"
                        }, {
                            field: "race",
							title: "种族"
                        }, {
                            field: "attack",
							title: "攻击"
                        }, {
                            field: "defence",
							title: "防御"
                        }, {
                            field: "rare",
							title: "罕见度"
                        }, {
                            field: "package",
							title: "卡包"
                        }, {
                            field: "description",
							title: "效果"
                        }]
                    });
                });
            </script>
        </div>
  </body>
</html>